<template>
    <img class="x0" src="@/assets/Home相关/logo改.png">
    <img class="x2" src="@/assets/Home相关/文字焕发.png">
    <el-text class="text-1" size="large">首页</el-text>
    <el-text class="text-2" size="large">流行发型</el-text>
    <el-text class="text-3" size="large">男生发型</el-text>
    <el-text class="text-4" size="large">女生发型</el-text>
    <el-text class="text-5" size="large">DIY发型</el-text>
    <el-text class="text-6" size="large">其他</el-text>
    <img class="x3" src="@/assets/Home相关/搜索框.png">
    <el-col :span="12" v-show="isUserLoggedIn">
        <div class="demo-basic--circle">
                <el-avatar :size="45" :src="circleUrl" />
        </div>
      <el-text class="username" size="large">{{loginInfo.userInfo.username}}</el-text>
    </el-col>
    <el-text class="text-7" size="large" @click="goLogin" v-show="!isUserLoggedIn">
      登录
    </el-text>
    <el-text class="text-8" size="large" @click="goRegister" v-show="!isUserLoggedIn">
      注册
    </el-text>

    <img class="line_top" src="@/assets/Home相关/顶部分割线.png">
    <div class="titleContainer">
        <el-text class="title" size="large">推荐发型</el-text>
        <el-text class="title" size="large">关注发型</el-text>
        <el-text class="title" size="large">热门发型</el-text>
        <el-text class="title" size="large">明星发型</el-text>
    </div>
    <img class="line_content" src="@/assets/Home相关/中间分割线.png">
    <div class="hairStyleModule">
        <div class="hair">
            <img src="" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref, toRefs} from 'vue'
import { loginInfo } from "@/utils/store.js"
import request from "@/utils/request";
import {ElMessage} from "element-plus";
const state = reactive({
  circleUrl: ref(''),
  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})

let userList = ref([])

onMounted(() => {
  request.post(`/api/users/selectUserByUsername`, loginInfo.userInfo)
      .then(res => {
        if (res.code == '200') {
          localStorage.setItem('token', res.data)

          userList.value = res.data
          console.log(userList.value)
          state.circleUrl.value = userList.value.avatar;
        } else {
          ElMessage.error(res.msg)
        }
      }).catch(error => {
    console.log(error)
  })

})

const isUserLoggedIn = computed(() => !!loginInfo.userInfo.username)

/*点击跳转登录页*/
function goLogin() {
    window.location.href = 'http://localhost:5173/Login'
}
/*点击打开注册页*/
function goRegister() {
    window.location.href = 'http://localhost:5173/Register'
}
const { circleUrl, squareUrl, sizeList } = toRefs(state)
</script>

<style scoped>

.x0 {
    /*等比例缩放*/
    width: 3%;
    top: 1px;
    left: 60px;
    height: auto;
    position: absolute;
}

.line_top {
    top: 60px;
    position: absolute;
    width: 100%;
}

.line_content {
    top: 385px;
    position: absolute;
    width: 100%;
}


.x2 {
    top: 9px;
    left: 140px;
    position: absolute;
}

.x3 {
    top: 15px;
    right: 350px;
    position: absolute;
}

.text-1 {
    top: 5px;
    left: 360px;
    position: absolute;
    /*字号 */
    font-size: 25px;
    /*字体加粗 */
    font-weight: bold;
    /*鼠标悬浮 */
    cursor: pointer;
    padding: 10px 20px;
    /* 添加内边距以确保背景覆盖整个元素 */
}

.text-1:hover {
    color: white;
    background-color: #9155f0;
}

.text-2 {
    top: 5px;
    left: 460px;
    position: absolute;
    /*字号 */
    font-size: 25px;
    /*字体加粗 */
    font-weight: bold;
    /*鼠标悬浮 */
    cursor: pointer;
    padding: 10px 20px;
    /* 添加内边距以确保背景覆盖整个元素 */
}

.text-2:hover {
    color: white;
    background-color: #9155f0;
}

.text-3 {
    top: 5px;
    left: 600px;
    position: absolute;
    /*字号 */
    font-size: 25px;
    /*字体加粗 */
    font-weight: bold;
    /*鼠标悬浮 */
    cursor: pointer;
    padding: 10px 20px;
    /* 添加内边距以确保背景覆盖整个元素 */
}

.text-3:hover {
    color: white;
    background-color: #9155f0;
}

.text-4 {
    top: 5px;
    left: 740px;
    position: absolute;
    /*字号 */
    font-size: 25px;
    /*字体加粗 */
    font-weight: bold;
    /*鼠标悬浮 */
    cursor: pointer;
    padding: 10px 20px;
    /* 添加内边距以确保背景覆盖整个元素 */
}

.text-4:hover {
    color: white;
    background-color: #9155f0;
}

.text-5 {
    top: 5px;
    left: 880px;
    position: absolute;
    /*字号 */
    font-size: 25px;
    /*字体加粗 */
    font-weight: bold;
    /*鼠标悬浮 */
    cursor: pointer;
    padding: 10px 20px;
    /* 添加内边距以确保背景覆盖整个元素 */
}

.text-5:hover {
    color: white;
    background-color: #9155f0;
}

.text-6 {
    top: 5px;
    left: 1020px;
    position: absolute;
    /*字号 */
    font-size: 25px;
    /*字体加粗 */
    font-weight: bold;
    /*鼠标悬浮 */
    cursor: pointer;
    padding: 10px 20px;
    /* 添加内边距以确保背景覆盖整个元素 */
}

.text-6:hover {
    color: white;
    background-color: #9155f0;
}
.text-7 {
  right: 220px;
  font-size: 25px;
  /*字体加�� */
  font-weight: bold;
  /*��标����� */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
  position: absolute;
  /*设置图层最上方*/
  z-index: 999;
}
.text-7:hover {
  /*字体颜色变为紫色*/
  color: #9155f0;
}
.text-8 {
  right: 140px;
  font-size: 25px;
  /*字体加�� */
  font-weight: bold;
  /*��标����� */
  cursor: pointer;
  padding: 10px 20px;
  /* 添加内边距以确保背景覆盖整个元素 */
  position: absolute;
  /*设置图层最上方*/
  z-index: 999;
}
.text-8:hover {
  /*字体颜色变为紫色*/
  color: #9155f0;
}
.username {
  position: absolute;
  top: 23px;
  right: 180px;
}


/* title样式 */
.titleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-top: 334px;
}

.title {
    font-size: 21px;
    /*字体加粗 */
    font-weight: bold;
    /*鼠标悬浮 */
    cursor: pointer;
    padding: 10px 20px;
    /* 添加内边距以确保背景覆盖整个元素 */
    margin-right: 30px;
}

.title:hover,
title:active {
    color: #fff;
    background-image: url(@/assets/Home相关/矩形5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.button_background_1 {
    position: absolute;
    left: 600px;
    top: 350px;
}

.sub-title {
    margin-bottom: 10px;
    font-size: 14px;
    color: #000;
    position: relative;
    left: 60px;
    top: -40px;
    size: 20px;
}

.demo-basic--circle {
    position: absolute;
    right: 260px;
}

.block {
    flex: 1;
}
</style>